<template>
  <div class="flex-1 h-full card_class">
    <div class="echarts" style="height: calc(100% - 50px); display: flex">
      <div style="height: 100%; width: 100%">
        <div class="card_title">
          <span>订单总体汇总</span>

          <div v-if="!isDarkMode(routeName)">
            <el-select
              v-model="searchParam.year"
              placeholder="请选择"
              filterable
              :suffixIcon="() => '年'"
              class="w-[70px] mr-[10px]"
              size="small"
              @change="handleSearch"
            >
              <el-option
                v-for="item in useDictionary('YearList')"
                :key="item.value"
                :label="item.value"
                :value="item.value"
              />
            </el-select>
            <el-select
              v-model="searchParam.month"
              placeholder="请选择"
              filterable
              clearable
              :suffixIcon="() => '月'"
              class="w-[50px]"
              :class="!panelSetIcon ? 'mr-[20px]' : ''"
              size="small"
              @change="handleSearch"
            >
              <el-option
                v-for="item in useDictionary('MonthList')"
                :key="item.value"
                :label="item.value"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <ECharts
          v-if="option"
          :option="option"
          :id="`QmsProductRejectBar` + props.id"
          ref="chart"
        />
      </div>
    </div>
    <i-ep-close
      v-show="!panelSetIcon"
      class="el-icon-close"
      style="float: right; padding: 3px 0"
      @click="deletePanelItem"
    />
  </div>
</template>

<script lang="ts" setup>
import dayjs from "dayjs";
import request from "@/utils/request";
import { useDictionary } from "@/utils/useTable";
import { qmsProduceRejectList } from "@/assets/js/qms.ts";
import * as echarts from "echarts";
import { useRoute } from "vue-router";
import { isDarkMode } from "@/utils/index";
const routeName = useRoute().name;
const emit = defineEmits(["deletePanelItemEvent"]);

const props = defineProps({
  panelSetIcon: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  url: {
    type: String,
    default: () => {
      return "";
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  params: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const { panelSetIcon, id, url, title } = toRefs(props);

function deletePanelItem() {
  emit("deletePanelItemEvent", id.value);
}

const reportData = ref();

const searchParam = reactive({
  year: dayjs().year().toString(),
  month: (dayjs().month() + 1).toString(),
  // year: "2025",
  // month: "2",
});

const searchedParam = reactive({
  year: dayjs().year().toString(),
  month: (dayjs().month() + 1).toString(),
});

async function handleSearch() {
  reportData.value = null;

  loading.value = true;
  Object.assign(searchedParam, searchParam);
  // const { data } = await request({
  //   url: `/mes/mesplanstatistics/queryOrderSummary`,
  //   method: "post",
  //   data: {
  //     statisticsYear: searchParam.year,
  //     statisticsMoon: searchParam.month,
  //   },
  // }).finally(() => {
  //   loading.value = false;
  // });
  // reportData.value = data;
  // console.log(reportData.value);

  setOptions();
  //   nextTick(() => {
  //     setAnimation();
  //   });
}

const option = ref();
const chart = ref();
const option1 = ref();
function setOptions() {
  // 堆叠趋势图
  const rawData = [
    [100, 302, 301, 334, 390, 330, 320],
    [320, 132, 101, 134, 90, 230, 210],
    [220, 182, 191, 234, 290, 330, 310],
    [150, 212, 201, 154, 190, 330, 410],
    [820, 832, 901, 934, 1290, 1330, 1320],
  ];
  const grid = {
    left: 100,
    right: 100,
    top: 50,
    bottom: 50,
  };
  const series = [
    "Direct",
    "Mail Ad",
    "Affiliate Ad",
    "Video Ad",
    "Search Engine",
  ].map((name, sid) => {
    return {
      name,
      type: "bar",
      stack: "total",
      barWidth: "60%",
      label: {
        show: true,
        formatter: (params) => params.value,
      },
      data: rawData[sid],
    };
  });

  option.value = {
    legend: {
      selectedMode: false,
    },
    grid,
    yAxis: {
      type: "value",
    },
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    series,
  };
}

onMounted(() => {});

const radio1 = ref("1");

const loading = ref(false);

const pieData = ref([
  { value: 500, name: "外部订单" },
  { value: 5000, name: "内部订单" },
]);

onMounted(() => {
  handleSearch();
});
</script>

<style lang="scss" scoped>
.card_class {
  background-color: var(--el-bg-color-overlay);
  border-radius: 4px;
  box-shadow: 0px 0px 12px rgba(3, 8, 72, 0.08);
  .card_title {
    white-space: nowrap;
    font-size: 20px;
    color: #333;
    font-family: YOUSHE;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
